<template>
  <div>
    <n-modal
      :show="props.showModal"
      :on-mask-click="maskClick"
      :class="{ 'blow-up': isBlowUp }"
    >
      <n-card
        style="width: 50%; max-height: 60vh; min-width: 650px"
        title="上传图片"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        header-style="padding:20px;padding-bottom:10px;"
        content-style="overflow: hidden; overflow-y: auto;padding:20px;padding-top:0px;"
      >
        <template #header-extra>
          <n-button @click="closeModal" text size="tiny" color="#ff69b4">
            <template #icon>
              <n-icon size="20">
                <Close></Close>
              </n-icon>
            </template>
          </n-button>
        </template>
        <div style="margin: 20px 0px">
          <n-form
            label-placement="left"
            ref="formRef"
            :label-width="80"
            :model="formValue"
            :rules="rules"
            :size="size"
          >
            <n-form-item label="标签名称" path="tagName">
              <n-input
                v-model:value="formValue.tagName"
                placeholder="输入标签名称"
              />
            </n-form-item>
            <n-form-item label="父级标签" path="pTag">
              <n-cascader
                v-model:value="formValue.pTag"
                placeholder="父级标签"
                :options="options"
                check-strategy="child"
                size="medium"
                clearable="true"
              />
            </n-form-item>
            <n-form-item label="描述">
              <n-input
                type="textarea"
                placeholder="标签的描述"
                v-model:value="formValue.description"
              >
              </n-input>
            </n-form-item>
          </n-form>
        </div>
        <template #action>
          <div
            style="
              margin: -15px;
              display: flex;
              justify-content: flex-end;
              gap: 10px;
            "
          >
            <n-button size="small" @click="closeModal">取消</n-button>
            <n-button size="small" type="primary" @click="handleValidateClick">
              确定
            </n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Close } from "@vicons/ionicons5";
import { addTag } from "@/api/tag.ts";
import { useStore } from "vuex";

const props = defineProps({
  showModal: {
    type: Boolean,
    default: () => false,
  },
  data: {
    type: String,
    default: "",
  },
});
const store = useStore();
const formRef = ref(null);
const isBlowUp = ref(false);
const formValue = ref({
  tagName: "相册",
  pTag: null,
  description: '用于区分属于"相册"的图片',
});
const rules = {
  tagName: {
    required: true,
    trigger: ["blur", "input"],
    message: "请输入 标签名称",
  },
};
const options = ref();

const init = () => {
  options.value = [];
  props.data.forEach((d) => {
    options.value.push({
      label: d.t_name,
      value: d.t_id,
      children: getTreeChildren(d.children),
    });
  });
};
const getTreeChildren = (data) => {
  let children = [];
  data.forEach((d) => {
    children.push({
      label: d.t_name,
      value: d.t_id,
      children: getTreeChildren(d.children),
    });
  });

  return children.length == 0 ? null : children;
};

const maskClick = () => {
  isBlowUp.value = true;
  setTimeout(() => {
    isBlowUp.value = false;
  }, 500);
};
const emit = defineEmits(["closeModal", "getTag"]);

// 假设你有一个方法来切换模态框的显示状态
const closeModal = () => {
  emit("closeModal");
};
const handleValidateClick = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      let params = {
        t_Parent: formValue.value.pTag,
        t_name: formValue.value.tagName,
        t_description: formValue.value.description,
        t_creator: store.state.userInfo?.u_Account??null,
      };
      addTag(params).then((res) => {
        if (res.code == 200) {
          window.$message.success(res.message);
          formValue.value.pTag = null;
          formValue.value.tagName = null;
          formValue.value.description = null;
          emit("getTag");
        } else {
          window.$message.error(res.message);
        }
      });
    } else {
      window.$message.error("表单验证错误");
    }
  });
};
defineExpose({ init });
</script>

<style scoped>
.blow-up {
  animation: scaleAnimation 0.5s infinite;
  transform-origin: center center;
  /* 设置缩放中心为元素中心点 */
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
    transform-origin: center center;
  }

  50% {
    transform: scale(1.1);
    /* 在动画中点缩放到1.1倍 */
    transform-origin: center center;
  }

  100% {
    transform: scale(1);
    /* 在动画结束时缩放回原始大小 */
    transform-origin: center center;
  }
}
</style>
